<template>
  <div class="app-container">
    <div class="tableList">
      <div class="insTitle">
        <span>添加用户</span>
      </div>
      <el-form :inline="true" class="block-form block-bg">
        <el-form-item label="用户组名：" >
          {{form.groupName}}
        </el-form-item>
      </el-form>
      <el-row>
        <el-col :span="11">
          <el-form
            :model="queryParams"
            class="block-form"
            ref="queryForm"
            label-position="right"
            label-width="68px"
          >
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="姓名：" prop="userName">
                  <el-input
                    v-model="queryParams.userName"
                    :placeholder="$t('public.placeholder',{placeholder: '姓名'})"
                    size="small"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="部门：" prop="deptName">
                  <el-input
                    v-model="queryParams.deptName"
                    :placeholder="$t('public.placeholder',{placeholder:'部门'})"
                    size="small"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8" align="right">
           <span class="searchAres searchAresHeng">
                <el-form-item class="empty-item">
                  <el-button
                    type="primary"
                    icon="el-icon-search"
                    size="mini"
                    class="searchBtn"
                    @click="handleQuery"
                  >{{ $t("public.query") }}</el-button
                  >
                  <el-button
                    class="resectBtn"
                    icon="el-icon-refresh"
                    size="mini"
                    @click="resetQuery"
                  >{{ $t("public.reset") }}</el-button
                  >
                </el-form-item>

           </span>
              </el-col>
            </el-row>
          </el-form>
<!--    系统用户表格-->
          <el-table stripe v-loading="loading" :data="userList" height="395px" ref="table1"  @row-click="rowClick1" @selection-change="handleSelectionChange1">
            <el-table-column type="selection" width="55"  align="center" />

            <el-table-column label="姓名" align="center" prop="userName"  show-overflow-tooltip/>
            <el-table-column label="部门" align="center" prop="deptName"  show-overflow-tooltip/>

            <el-table-column label="厂区" align="center" prop="factoryName" show-overflow-tooltip />

          </el-table>
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
            layout=" sizes,total, prev, pager, next, jumper"
          />
        </el-col>
        <el-col :span="2" class="info-col-flex">
          <i class="el-icon-arrow-right" @click="right"></i>
          <i class="el-icon-arrow-left"  @click="left"></i>
        </el-col>
        <el-col :span="11">
          <el-form style="opacity: 0;" class="block-form" label-position="right" label-width="68px">
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="占位"></el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <el-table stripe v-loading="loading" :data="resList" height="395px" ref="table2"  @row-click="rowClick2" @selection-change="handleSelectionChange2">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="姓名" align="center" prop="userName"  show-overflow-tooltip/>
            <el-table-column label="部门" align="center" prop="deptName"  show-overflow-tooltip/>

            <el-table-column label="厂区" align="center" prop="factoryName" show-overflow-tooltip />
            <el-table-column label="接替人" align="center" prop="replaceMan" show-overflow-tooltip />
            <el-table-column :label="$t('public.opera')" fixed="right" align="center" width="100">
              <template slot-scope="scope">
                <div  class="action-wrap">
                  <table-body-btn
                    type="add"
                    name="添加接替人"
                    @click.native="handleReplace(scope.row)"
                  />
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-divider/>

      <div  class="info-footer">
        <el-button  icon="el-icon-close" class="mr20" size="mini">取 消</el-button>
        <el-button :loading="loading" type="primary" @click="submitForm" icon="el-icon-check"  size="mini">确 定</el-button>
      </div>
    </div>
    <replacer :visible.sync="userReplacerVisible" :single="true"  title="选择接替人" @change="handlerReplacerChange"></replacer>
  </div>
</template>

<script>
import { getUerGroup } from "@/api/system/userGroup";
import { listUser } from "@/api/system/user";
import { listUerGroup,addQmsUser, delUerGroup } from "@/api/system/userGroup";
import replacer from './replacer'
export default {
  name: 'info',
  components:{replacer},
  data(){
    return  {
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      total:0,
      form: {},
      loading: false,
      userReplacerVisible: false,
      userList:[],
      resList:[],
      selection1:[],
      selection2:[],
      current:undefined,
    }
  },
  mounted(){
    const {query } = this.$route
    const {id} = query
    if(id){
      this.form.id = id
      this.getInfo()
    }
    this.getList()
  },
  methods:{
    getInfo(){
      const {id} = this.form
      getUerGroup(id).then(res=>{
          this.form=res.data
      })
    },
    getList(){
      listUser(this.queryParams).then(res=>{
        this.userList = res.rows
        this.total = res.total
      })
    },
    rowClick1(row, column, event) {
      this.$refs.table1.toggleRowSelection(row);
    },
    rowClick2(row, column, event) {
      this.$refs.table2.toggleRowSelection(row);
    },
    handleQuery(){
      this.queryParams.pageNum = 1;
      this.getList()
    },
    resetQuery(){
      this.resetForm("queryForm");
      this.handleQuery();
    },
    handleReplace(row){
      this.userReplacerVisible = true
      this.current = row
    },
    handlerReplacerChange(user){
      this.resList = this.resList.map((i)=>{
        if(this.current.userId == i.userId){
          i.replaceMan = user.userName
          i.replaceId = user.userId
        }
        return i
      })
    },
    handleSelectionChange1(selection) {
      this.selection1 = selection
    },
    handleSelectionChange2(selection) {
      this.selection2 = selection
    },
    right(){
      if(this.selection1.length >0 ){
        this.selection1.forEach((i)=>{
          if(!this.resList.find(j=>j.userId == i.userId)){
            this.resList.push(i)
          }
        })
      }
    },
    left(){
      this.resList = this.resList.filter(i=>{
        return !this.selection2.find(j=>j.userId == i.userId)
      })
    },
    submitForm(){
      const {id} = this.form
      if(this.resList.length > 0){
      const data = this.resList.map(i=>{return {deptId:i.deptId,deptName:i.deptName,groupId: id,userId:i.userId,userName:i.userName,replaceMan:i.replaceMan,replaceId:i.replaceId}})
      this.loading = true
        addQmsUser(data).then(res=>{
          this.loading =true
        if (res.code == 200) {
          this.$message.success(this.$t('formValidation.addedSuccessfully'))
          this.$tab.closeOpenPage('/system/usergroup')
        }
      })
      }
    },
  }

}
</script>

<style scoped>
.info-col-flex{
  height:500px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.info-col-flex i {
  line-height: 50px;
  padding:0 20px;
  cursor: pointer;
}
.info-footer{
  margin: 15px 0;
  text-align: center;
}
.block-form{
  padding:0 15px;
}
.block-form ::v-deep .el-form-item{
  margin-bottom: 0;
}
.block-bg{
  background: rgba(11, 123, 227, 0.04);}
.empty-item  ::v-deep .el-form-item__content{
  margin-left: 0!important;
}
</style>
